<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas{
            background: url("images/p_1.jpg");
        }

    </style>

</head>
<body style='padding: 100px;'>
<canvas id="canvas" width= "320" height="160" style="border: 1px solid #000;"></canvas>

<script>
    //1.获取标签
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.添加蒙版
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0,0, canvas.width, canvas.height);

    //修改合成属性
    ctx.globalCompositeOperation = 'destination-out';

    //3.监听鼠标点击
    canvas.onmousedown = function () {

        //监听鼠标移动
        canvas.onmousemove = function (e) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = 'red';
            ctx.arc(e.offsetX, e.offsetY, 20, 0, 2*Math.PI);
            ctx.fill();
            ctx.restore();
        }
        //监听鼠标抬起
        canvas.onmouseup = function () {
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }

    }


</script>

</body>
</html>